extends common/layout
block content
    link(rel='stylesheet' type='text/css' href='../css/shop.min.css')
    link(rel='stylesheet' type='text/css' href='../css/seller-center.min.css')
    include common/head
    div.seller-center-container.shop-container
        include common/nav
        div.seller-content.clearfix
            div.left-wrap
                div.category-wrapper
                    div.category.active
                        div.level-1
                            i.icon.icon-home
                            span 首页
                    div.category
                        div.level-1
                            i.icon.icon-baibeigunali
                            span 宝贝管理
                        ul.list
                            li
                                a 发布宝贝
                            li
                                a 出售中的宝贝
                            li
                                a 仓库中的宝贝
                            li
                                a 橱窗推荐
                    div.category
                        div.level-1
                            i.icon.icon-price
                            span 交易管理
                        ul.list
                            li
                                a 订单管理
                            li
                                a 物流工具
                            li
                                a 评价管理
                    div.category
                        div.level-1
                            i.icon.icon-dianpu2
                            span 店铺管理
                        ul.list
                            li
                                a 查看我的店铺
                            li
                                a 店铺基本设置
                            li
                                a 店铺装修
                            li
                                a 图片空间
                            li
                                a 宝贝分类管理
                    div.category
                        div.level-1
                            i.icon.icon-kefu
                            span 客服管理
                        ul.list
                            li
                                a 退款管理
                    div.category
                        div.level-1
                            i.icon.icon-zhanghu
                            span 消费者保障服务
                        ul.list
                            li
                                a 保证金
                            li
                                a 到期保障
                            li
                                a 账户管理
                    div.category
                        div.level-1
                            i.icon.icon-ziyuan
                            span 资源中心
                        ul.list
                            li
                                a 网站资源
                            li
                                a 素材包
            div.right-wrap
                div.main-wrap
                    p.first-title 我要开店
                    div.page-container
                        p.tip
                            span 一个身份只能开一家店，开店后店铺无法注销，申请到正式开通预计需1~3个工作日。了解更多请看
                            a.blue-font 开店规则必看
                        div.open-step.clearfix
                            div.step-item.active
                                div.step-item-container
                                    div.step-title
                                        div.step-item-cont
                                            div.step-item-num 1
                                            div.step-item-title 填写店铺基本信息
                                            div.step-item-desc 店铺的基本信息
                            div.step-item
                                div.step-item-container
                                    div.step-title
                                        div.step-item-cont
                                            div.step-item-num 2
                                            div.step-item-title 实名认证
                                            div.step-item-desc 真实填写个人的真实信息
                            div.step-item
                                div.step-item-container
                                    div.step-title
                                        div.step-item-cont
                                            div.step-item-num 3
                                            div.step-item-title 开店完成
                                            div.step-item-desc 开店完成进入店铺装修吧

                        form(id="firstForm")
                            div.first-step-container
                                div.input-group
                                    div.input-item.clearfix
                                        div.text-title *店铺名称：
                                        div.text-content
                                            input(type="nickname" name="shopname" required value="")
                                    div.input-item.clearfix
                                        div.text-title *店铺标识：
                                        div.file-content
                                            div.file-desc.clearfix
                                                div.img-null-content
                                                    img(src="../image/default_img.png")
                                                img.img-content.hidden(src="")
                                                div.btn-file 选择文件
                                                    input(id="img-sign" name="imgfile" type="file" required value="")
                                    div.input-item.clearfix
                                        div.text-title 店铺简介：
                                        div.text-content
                                            textarea
                                    div.input-item.clearfix
                                        div.text-title *经营地址：
                                        div.select-content
                                            div(id="dist").clearfix
                                                div.select-desc
                                                    div.select-block
                                                        select(data-role="province" name="province" required)
                                                            option(value="" selected="selected") 请选择
                                                            option 浙江省
                                                div.select-desc
                                                    div.select-block
                                                        select(data-role="city" name="city" required)
                                                            option(value="" selected="selected") 请选择
                                                            option 杭州市
                                                div.select-desc
                                                    div.select-block
                                                        select(data-role="county" name="county" required)
                                                            option(value="" selected="selected") 请选择
                                                            option 西湖区
                                    div.input-item.clearfix
                                        div.text-title 详细地址：
                                        div.text-content
                                            input(type="text")
                                    div.input-item.clearfix
                                        div.text-title *主要货源：
                                        div.radio-content
                                            div.radio-desc.clearfix
                                                label
                                                    input(type="radio" name="type" required)
                                                    | 线下批发市场
                                                label
                                                    input(type="radio" name="type" required)
                                                    | 实体店拿货
                                                label
                                                    input(type="radio" name="type" required)
                                                    | 阿里巴巴批发
                                                label
                                                    input(type="radio" name="type" required)
                                                    | 分销/代销
                                                label
                                                    input(type="radio" name="type" required)
                                                    | 自己生产
                                                label
                                                    input(type="radio" name="type" required)
                                                    | 代工生产
                                                label
                                                    input(type="radio" name="type" required)
                                                    | 自由公司渠道
                                                label
                                                    input(type="radio" name="type" required)
                                                    | 贷源还未确定
                                    div.input-item.clearfix
                                        div.text-title *店铺介绍：
                                        div.text-content
                                            textarea(required)
                                div.btn-container
                                    button(type="button").next-btn.btn-orange 下一步
                        form(id="secondForm")
                            div.second-step-container.hidden
                                p.id-tip 请上传本人身份证件，确保图片清晰，四角完整
                                div.identity-container
                                    div.id-content.clearfix
                                        div.item-img.float-left
                                            span.id-title 身份证人像面
                                            div.img-null-content
                                                img(src="../image/default_img.png")
                                                span 点此上传
                                                input(id="id-img-front-input" type="file")
                                            img.img-content.hidden(src="")
                                        div.item-img.float-right
                                            span.id-title 身份证国徽面
                                            div.img-null-content
                                                img(src="../image/default_img.png")
                                                span 点此上传
                                                input(id="id-img-reverse-input" type="file")
                                            img.img-content.hidden(src="")
                                    div.id-content.clearfix
                                        div.item-img.float-left
                                            span.id-title 示例：
                                            img.img-null-content.no-border(src="../image/identity_front.png")
                                        div.item-img.float-right
                                            img.img-null-content.no-border(src="../image/identity_reverse.png")
                                div.btn-container
                                    button(type="button").btn-border-orange.prev-btn 上一步
                                    button.btn-orange.sub-btn 提交
                        div.third-step-container.hidden
                            p.succeed-tip 恭喜您已完成开店，现在可以进行宝贝发布了！
                            div.btn-container
                                a.btn-orange(href="issueProject.html") 发布宝贝

    script.
        $("#img-sign ,#id-img-reverse-input, #id-img-front-input").change(function () {
            formatImg($(this));
        });
        function formatImg(ele) {
            var url = getFileUrl(ele.attr("id"));
            ele.parent().parent().find(".img-content").attr("src", url);
            ele.parent().parent().find(".img-null-content").addClass("hidden");
            ele.parent().parent().find(".img-content").removeClass("hidden");
        }

        $(".next-btn").click(function () {
            if($('#firstForm').valid()) {
                $(".first-step-container").addClass("hidden");
                $(".second-step-container").removeClass("hidden");
                $(".third-step-container").addClass("hidden");
                $(".step-item").removeClass("active");
                $(".step-item").eq(1).addClass("active");
            }
        })

        $(".prev-btn").click(function () {
            $(".first-step-container").removeClass("hidden");
            $(".second-step-container").addClass("hidden");
            $(".third-step-container").addClass("hidden");
            $(".step-item").removeClass("active");
            $(".step-item").eq(0).addClass("active");
        })

        $(".sub-btn").click(function () {
            $(".first-step-container").addClass("hidden");
            $(".second-step-container").addClass("hidden");
            $(".third-step-container").removeClass("hidden");
            $(".step-item").removeClass("active");
            $(".step-item").eq(2).addClass("active");
        })

        $("#firstForm").validate()

